const getStyle = (elem) => {
    const style = document.defaultView.getComputedStyle(elem, "");
    return {
        position: style.getPropertyValue("position"),
        overflow: style.getPropertyValue("overflow"),
        overflowY: style.getPropertyValue("overflow-y"),
        overflowX: style.getPropertyValue("overflow-x"),
        display: style.getPropertyValue("display"),
        visibility: style.getPropertyValue("visibility"),
        opacity: style.getPropertyValue("opacity"),
    }
}

const isScrollable = (elem) => {
    const style = getStyle(elem);
    return (style.overflow === "scroll" || style.overflow === "auto"
            || style.overflowY === "scroll" || style.overflowY === "auto"
            || style.overflowX === "scroll" || style.overflowX === "auto")
        && style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0"
}


const getMaxScrollContainer = () => {
    var root = document.documentElement || document.body;
    var rootStyle = getComputedStyle(root);
    var rootPadding = {
        top: parseInt(rootStyle.paddingTop),
        right: parseInt(rootStyle.paddingRight),
        bottom: parseInt(rootStyle.paddingBottom),
        left: parseInt(rootStyle.paddingLeft)
    };
    var rootWidth = root.clientWidth - rootPadding.left - rootPadding.right;
    var rootHeight = root.clientHeight - rootPadding.top - rootPadding.bottom;

    var maxContainer = null;
    var maxArea = 0;
    var elements = document.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (root.contains(element)) {
            var rect = element.getBoundingClientRect();
            var width = rect.width + rootPadding.left + rootPadding.right;
            var height = rect.height + rootPadding.top + rootPadding.bottom;
            if (width > rootWidth || height > rootHeight) {
                var area = width * height;
                // if (area > maxArea) {
                if (area > maxArea && isScrollable(element)) {
                    maxArea = area;
                    maxContainer = element;
                }
            }
        }
    }
    console.log(maxContainer)
    return maxContainer;
};


export function myFunction() {
    window.alert(window.innerHeight)
    window.scrollBy(0, window.innerHeight)
    window.scrollBy(0, window.innerHeight)
    window.alert(123)
}

const myFunction2 = (elem) => {
    const style = document.defaultView.getComputedStyle(elem, "");
    return {
        position: style.getPropertyValue("position"),
        overflow: style.getPropertyValue("overflow"),
        overflowY: style.getPropertyValue("overflow-y"),
        overflowX: style.getPropertyValue("overflow-x"),
        display: style.getPropertyValue("display"),
        visibility: style.getPropertyValue("visibility"),
        opacity: style.getPropertyValue("opacity"),
    }
}
